<template>
    <div>
        <div class="top-three">
            <div class="items">
                <div class="img"></div>
                <div class="text">已发布资源包：<br />test1</div>
            </div>
            <div class="items">
                <div class="img1"></div>
                <div class="text">未发布资源包：<br />test2</div>
            </div>
            <div class="items">
                <div class="img2"></div>
                <div class="text">最新资源包模板:v1</div>
            </div>
        </div>
        <div class="echarts">
            <div id="contents" style="width: 100%; height: 100%"></div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from 'vue';

import * as echarts from 'echarts';

let myChart;

onMounted(() => {
    myChart = echarts.init(document.getElementById('contents'));
    myChart.setOption({
        title: {
            text: '资源包使用情况',
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['Li Ce', 'Luo Jin Rong', 'Zeng Qin', 'Chen You Wei', 'YangJiaXin', 'Wang Chao'],
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: 'Li Ce',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
                name: 'Luo Jin Rong',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: 'Zeng Qin',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410],
            },
            {
                name: 'Chen You Wei`',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320],
            },
            {
                name: 'YangJiaXin',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
            {
                name: 'Wang Chao',
                type: 'line',
                stack: 'Total',
                data: [600, 700, 800, 934, 1110, 1220, 1560],
            },
        ],
    });
});
onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();
    }
});
</script>

<style lang="scss" scoped>
.top-three {
    // width: 100%;
    height: 30%;
    display: flex;
    justify-content: space-around;
}
.img {
    width: 30%;
    // height: 170px;
    background: url('@/assets/3成功事件总数.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.img1 {
    width: 30%;
    // height: 170px;
    background: url('@/assets/1攻击者总数.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.img2 {
    width: 30%;
    // height: 170px;
    background: url('@/assets/2受害者总数.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.items {
    margin: 10px 0;
    display: flex;
    flex: 1;
    // width: 400px;
    // height: 30%;
}
.text {
    // width: 200px;
    height: 30%;
    font-size: 20px;
    // line-height: 50px;
    padding: 50px 0 0 0;
}
#contents {
    width: 100%;
    height: 550px;
    margin: 10px 0;
}
.echarts {
    width: 100%;
    height: calc(70vh - 50px);
}
</style>
